import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done, id, setTodoList, todoList }) {
  //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive, setIsActive] = useState(false);

  //鼠标移入移出的事件函数
  const mouseHandle = (bool) => {
    //外层函数用来接收参数,返回的函数是真正的事件函数
    return () => {
      setIsActive(bool)
    }
  }

  //多选框触发改变的事件函数
  const checkChangeHandle = (e) => {
    //不能把以前的值修改以后再设置回去,这个对于react来说,接收的地址值没有发生变化,所以react不会重新渲染
    const newTodoList = todoList.map(item => {
      if (item.id === id) {
        //如果符合条件,我们执行一个约定 尽量不要修改state的值,我们可以重新得到一个新的值
        return { ...item, done: e.target.checked }
      }
      return { ...item }
    })

    setTodoList(newTodoList);
  }

  //删除事件的回调函数
  const deleteHandle = () => {
    const newTodoList = todoList.filter(item => {
      return item.id !== id
    })
    setTodoList(newTodoList)
  }

  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
